<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>淘票票</title>
	<link rel="stylesheet" href="../../../public/css/bootstrap.min.css">
	<link rel="stylesheet" href="../../../public/css/layout.css">
	<link rel="stylesheet" href="../../../public/css/seatOrder.css">
	<script type="text/javascript" src="../../../public/js/vue.js"></script>
</head>
<body>
	<header class="header-wrap">
	<div class="center">
		<h1 class="logo">淘票票</h1>
		<div class="city-wrap">
			<a href="#">
				<span class="name">广州</span>
				<i class="tri"></i>
			</a>
		</div>
		<div class="nav-wrap">
			<ul>
				<li><a href="home.html">首页</a></li>
				<li><a href="film.html">影片</a></li>
				<li class="active"><a href="theatre.html">影院</a></li>
			</ul>
		</div>
		<div class="log-wrap">
			<ul>
				<li><a href="#" data-toggle="modal" 
   data-target="#log-modal">请登录</a></li>
				<li><a href="#" data-toggle="modal" 
   data-target="#reg-modal">免费注册</a></li>
			</ul>
		</div>
		<!-- 登录模态框 -->
		<div class="modal fade" id="log-modal" tabindex="-1" role="dialog" 
   aria-labelledby="myModalLabel" aria-hidden="true">
		   <div class="modal-dialog">
		      <div class="modal-content">
		         <div class="modal-header">
		            <button type="button" class="close" 
		               data-dismiss="modal" aria-hidden="true">
		                  &times;
		            </button>
		            <h4 class="modal-title" id="myModalLabel">
		               账户登录
		            </h4>
		         </div>
		         <div class="modal-body">
		            <div class="field username-field">
						<label for="username"> 
							账号
						</label>
						<input type="text" id="username" class="login-text" value="" maxlength="50" tabindex="1" aria-label="手机号/会员名/邮箱" placeholder="手机号/会员名/邮箱">
					</div>
					<div class="field pwd-field">
						<label for="log-pass">
							密码
						</label> 
				   		<input type="password" id="log-pass" class="login-text" maxlength="50" tabindex="2" aria-label="登录密码" placeholder="登录密码">
					</div>
		         </div>
		         <div class="modal-footer" id="log-sub">
		            <button v-on:click="back()" class="btn btn-default" 
		               data-dismiss="modal">关闭
		            </button>
		            <button v-on:click="submit()" class="btn btn-primary">
		               确定
		            </button>
		         </div>
		      </div>
			</div>
		</div>
		<!-- 注册模态框 -->
		<div class="modal fade" id="reg-modal" tabindex="-1" role="dialog" 
   aria-labelledby="myModalLabel" aria-hidden="true">
		   <div class="modal-dialog">
		      <div class="modal-content">
		         <div class="modal-header">
		            <button type="button" class="close" 
		               data-dismiss="modal" aria-hidden="true">
		                  &times;
		            </button>
		            <h4 class="modal-title" id="myModalLabel">
		               免费注册
		            </h4>
		         </div>
		         <div class="modal-body">
		            <div class="field username-field">
						<label for="username"> 
							手机号
						</label>
						<input type="text" id="phone" class="reg-text" value="" maxlength="50" tabindex="1">
					</div>
					<div class="field pwd-field">
						<label for="reg-pass">
							密码
						</label> 
				   		<input type="password" id="reg-pass" class="reg-text" maxlength="50" tabindex="2">
					</div>
					<div class="field pwd-field">
						<label for="reg-password">
							确认密码
						</label> 
				   		<input type="password" id="reg-password" class="reg-text" maxlength="50" tabindex="3">
				   		<span class="prompt"></span>
					</div>
		         </div>
		         <div class="modal-footer" id="reg-sub">
		            <button v-on:click="back()" class="btn btn-default" 
		               data-dismiss="modal">关闭
		            </button>
		            <button v-on:click="submit()" class="btn btn-primary">
		               确定
		            </button>
		         </div>
		      </div>
			</div>
		</div>
	</div>
	</header>
	<article>
	<div class="center">
		<div class="seat-step">
			<ul>
				<li class="down">
					<s></s>
					1.选择影片，场次
				</li>
				<li class="current">2.选座，填手机号</li>
				<li class="future">3.确认订单，支付</li>
				<li class="future">4.支付成功，影院取票观影</li>
			</ul>
		</div>
		<div class="seat-wrap">
			<div class="seat-left">
				<div class="seat-top">
					<div class="column">
						<ul>
							<label style="top:100px;">1</label>
							<label style="top:140px;">2</label>
							<label style="top:180px;">3</label>
							<label style="top:220px;">4</label>
							<label style="top:260px;">5</label>
							<label style="top:300px;">6</label>
							<label style="top:340px;">7</label>
							<label style="top:380px;">8</label>
							<label style="top:420px;">9</label>
							<label style="top:460px;">10</label>
						</ul>
					</div>
					<div class="seat-content">
						<div class="seat-title">
							<h2>广州横店影城-庆丰店 1号厅 银幕</h2>
							<s></s>
						</div>
						<div class="seat-choose">
							<div class="seat-down" id="seat-list">
								<seat-model v-for="item in items" track-by="$index" :s-flag="getFlag($index)" :s-left="getLeft($index)" :s-top="getTop($index)" :s-mark="getMark($index)" :s-id="getSeatid($index)"></seat-model>
								<script type="text/x-template" id="tem-seat">
								<div>
									<div v-bind:style="{'margin-left': sLeft, 'margin-top': sTop }" class="seat-cell" v-bind:class="{'seat-sold': sMark}" data-name="1排16座" data-seatid={{sId}} data-flag={{sFlag}}>
									</div>
									</div>
								</script>
							</div>
						</div>
					</div>
				</div>
				<div class="seat-bottom">
					<ul class="seat-info">
						<li>
							<span class="has-seat"></span>
							可选座位
						</li>
						<li>
							<span class="sell-seat"></span>
							已选座位
						</li>
						<li>
							<span class="check-seat"></span>
							不可选座位
						</li>
					</ul>
					<p> 本影厅共有座位100个，当前已售
					<span class="J_sell">0</span>
					个</p>
				</div>
			</div>
			<div class="seat-right">
				<div class="seat-movie">
					<div class="seat-pic">
						<a href="#">
							<img src="../../../public/img/02-1.jpg">
						</a>
					</div>
					<ul>
						<li>
							<h4>寒战2</h4>
						</li>
						<li>版本： 粤语 3D </li>
						<li>片长： 110分钟 </li>
					</ul>
				</div>
				<div class="seat-detail">
					<ul>
		                <li>
		                    <label>影院：</label>
		                    <strong>广州横店影城-庆丰店</strong>
		                </li>
		                <li>
		                    <label>影厅：</label>
		                    <strong>1号厅</strong>
		                </li>
		                <li>
		                    <label>场次：</label>
		                    <a href="#" class="change-place"><s></s>更换场次</a>
		                    <em>7月9日(周六) 23:05</em>
		                </li>
		                <li class="s-line" id="seat-group">
		                    <label>座位:</label>
		                    <span class="no-set">还未选择座位</span>
		                    <div class="pew-group">
		                    	<!-- <seat-i></seat-i> -->
		                    </div>
		                    <p class="seat-tips" style="">点击<em>左侧座位图</em>选择座位，再次点击取消</p>
		                    <p class="seat-text" style="display: none;">已选择<em>37</em>个座位，再次点击座位可以取消</p>
		                </li>
						<li>
		                    <label>原价：</label>
		                    <span class="origin-price" data-originprice="3700">¥37.00 x <i>1</i></span>
		                    <span class="origin-offer">37.00</span>
		                </li> 
						<li class="total">
		                    <label>总计:</label>
		                    <div>
		                        ¥
		                        <span class="price" data-price="3700">37.00</span>
		                    </div>
		                </li>
            		</ul>
				</div>
				<div class="seat-form">
		            <ul>
		                <li>接收电子码的手机号</li>
		                <li class="telphone">
		                    <input type="text" class="txt" value="" maxlength="11">
		                </li>
		                <li>
		                    <a href="#" class="sub">确认信息，下单</a>
		                </li>
		            </ul>
				</div>
			</div>
		</div>
		<div class="seat-foot">
			<div class="seat-msg">
		        <h5>特别提示：</h5>
		        <ul>
					<li>1、下单前请仔细核对影片、影院、场次、手机号等信息。</li>
					<li>2、下单后请于15分钟内完成支付，超时系统将不保留座位。</li>
					<li>3、每笔订单最多可以选择4个座位，请选择连续的座位。</li>
					<li>4、电影票售出后暂不支持退换 。</li>
		        </ul>
		    </div>
		</div>
	</div>
	</article>
	<footer>
		<div class="center foot-wrap">
			<div class="foot-middle">
				<h1>淘票票</h1>
				<dl>
					<dt>选座购票流程</dt>
					<dd><a href="#">选择影片和场次</a></dd>
					<dd><a href="#">选择中意的座位</a></dd>
					<dd><a href="#">支付并收到取票短信</a></dd>
				</dl>
				<dl>
					<dt>取票流程</dt>
					<dd><a href="#">收到取票短信</a></dd>
					<dd><a href="#">影院自助取票</a></dd>
					<dd><a href="#">短信重发方式</a></dd>
				</dl>
				<dl>
					<dt>常见问题</dt>
					<dd><a href="#">是否支持退换票</a></dd>
					<dd><a href="#">填错手机号怎么办</a></dd>
				</dl>
				<dl>
					<dt>关于我们</dt>
					<dd><a href="#">张国彬</a></dd>
					<dd><a href="#">陈晓霞</a></dd>
					<dd><a href="#">黄家健</a></dd>
					<dd><a href="#">黄宝多</a></dd>
				</dl>
			</div>
			<div class="foot-bottom">
				<p>@ 2016 数据库课程设计 张国彬小组所有</p>
			</div>
		</div> 
	</footer>
	<script src="../../../public/js/jquery-1.9.1.min.js"></script>
	<script src="../../../public/js/bootstrap.min.js"></script>
	<script src="../../../public/js/seatOrder.js"></script>
</body>
</html>